<template>
  <a-form class="layout-info" :model="formState" :rules="formRules" ref="form">
    <a-form-item label="布局栅格" name="">
      <a-input-number v-model:value="formState.spanNum" :min="2" :max="24" :precision="0" />
    </a-form-item>
    <!-- 布局容器 -->
    <template v-for="item in containerTypes" :key="item.type">
      <div v-if="pageType.includes(item.type)">
        <a-divider>{{ item.title }} 布局容器</a-divider>
        <tree-config ref="tree" :config="item" :data="data" />
      </div>
    </template>
  </a-form>
</template>

<script>
import TreeConfig from './TreeConfig.vue'
import { mapGetters } from 'vuex'
/**
 * 页面配置 - 基础信息
 * @author 朱琦
 * @date   时间：2023/1/31
 */
const key = 'layout'
const defaultForm = {
  spanNum: 24
}
export default {
  name: 'LayoutInfo',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    TreeConfig
  },
  data() {
    return {
      formState: {},
      formRules: {},
      containerList: [],
      // 布局容器 类型
      containerTypes: [
        { title: '一级组件', type: 'first' },
        { title: '二级组件', type: 'second' },
        { title: '详情组件', type: 'detail' }
      ]
    }
  },
  watch: {},
  computed: {
    ...mapGetters('page-manage-config', {
      pageType: 'pageType'
    })
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * 获取表单数据
     * @param {Object} form 表单数据
     */
    getForm(form) {
      let list = []
      this.$refs.tree.forEach(i => {
        list = [...list, ...i.treeData]
      })
      form[key] = this.formState
      form[key].containerList = list
    },
    /**
     * 设置表单数据
     * @param {Object} form 表单数据
     */
    setForm(form) {
      this.formState = { ...defaultForm, ...form[key] }
      // 布局容器列表
      this.containerList = this.formState.containerList || []
      // 初始化vuex
      this.$store.commit('page-manage-config/SET_CONTAINER_LIST', { data: this.containerList })
      // 根据 布局容器的 type值 进行分类
      this.containerTypes.forEach(container => {
        container.list = this.containerList.filter(i => i.type === container.type)
      })
    }
  }
}
</script>

<style scoped lang="less">
.layout-info {
}
</style>
